﻿@model LanguageType
@{
    ViewData["Title"] = "首页编辑";
    Layout = "~/Views/Shared/_ManageLayout.cshtml";
    var languageId = ViewData["languageId"] as int?;
}
@section css{
    <style>
        .layui-form-label {
            width: 97px;
        }
        .layui-input, .layui-textarea {
            width: 87%;
        }
        .layui-form-item .layui-inline {
            margin-bottom: 15px !important;
        }
    </style>
}
<!-- 加载动画 -->
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>
<!-- 正文开始 -->
<form class="layui-form" id="formAdvForm" lay-filter="formAdvForm">
    <input name="languageId" type="hidden" value="@languageId" />
    <div class="layui-fluid" style="padding-bottom: 75px;">
        <div class="layui-card">
            <div class="layui-card-header">产品信息</div>
            <div class="layui-card-body">
                <div class="layui-form-item layui-row">
                    <div class="layui-inline layui-col-md7">
                        <label class="layui-form-label layui-form-required">语言版本:</label>
                        <label class="layui-form-label layui-form-required" id="languageName">@Html.Raw(Model.Language)</label>
                    </div>
                    <div class="layui-inline layui-col-md7">
                        <label class="layui-form-label layui-form-required">SeoKeywords:</label>
                        <div class="layui-input-block">
                            <input name="seoKeywords" placeholder="请输入SeoKeywords" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md7">
                        <label class="layui-form-label layui-form-required">Seo描述:</label>
                        <div class="layui-input-block">
                            <input name="seoDescritions" placeholder="请输入Seo描述" class="layui-input" />
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md7">
                        <label class="layui-form-label layui-form-required">关于我们文本:</label>
                        <div class="layui-input-block">
                            <textarea name="aboutusText" id="aboutusText" placeholder="请输入关于我们文本" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md7">
                        <label class="layui-form-label">关于我们图片:</label>
                        <div class="layui-upload-drag" id="uploadAboutusImg">
                            <i class="layui-icon"></i>
                            <p>点击上传，或将文件拖拽到此处</p>
                            <div class="layui-hide" id="uploadAboutusImgView">
                                <hr>
                                <img src="" alt="上传成功后渲染" style="max-height: 120px; max-height: 120px">
                            </div>
                        </div>
                        <input name="aboutusImg" type="hidden">
                    </div>
                    <div class="layui-inline layui-col-md7">
                        <label class="layui-form-label">首页背景图1:</label>
                        <div class="layui-upload-drag" id="uploadBackground1">
                            <i class="layui-icon"></i>
                            <p>点击上传，或将文件拖拽到此处</p>
                            <div class="layui-hide" id="uploadBackground1View">
                                <hr>
                                <img src="" alt="上传成功后渲染" style="max-height: 120px; max-height: 120px">
                            </div>
                        </div>
                        <input name="background1" type="hidden">
                    </div>
                    <div class="layui-inline layui-col-md7">
                        <label class="layui-form-label">首页背景图2:</label>
                        <div class="layui-upload-drag" id="uploadBackground2">
                            <i class="layui-icon"></i>
                            <p>点击上传，或将文件拖拽到此处</p>
                            <div class="layui-hide" id="uploadBackground2View">
                                <hr>
                                <img src="" alt="上传成功后渲染" style="max-height: 120px; max-height: 120px">
                            </div>
                        </div>
                        <input name="background2" type="hidden">
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="form-group-bottom text-right">
        <button type="reset" class="layui-btn layui-btn-primary">&emsp;重置&emsp;</button>
        <a class="layui-btn" lay-filter="formAdvSubmit" lay-submit>&emsp;保存&emsp;</a>
    </div>
</form>
<script type="text/javascript">
    layui.use(['admin', 'layer', 'form', 'upload','CKEDITOR'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var CKEDITOR = layui.CKEDITOR;
        CKEDITOR.replace('aboutusText', { height: 480 });
        var insEdt = CKEDITOR.instances.aboutusText;
        var languageId = $("[name=languageId]").val();
        var upload = layui.upload;
        if (languageId > 0) {
            layer.load(2);
            $.ajax({
                url: '/api/webhome/' + languageId,
                type: 'get',
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                async: true,
                complete: function (obj) {
                    layer.closeAll('loading');
                },
                success: function (res) {
                    if (res.success) {
                        form.val("formAdvForm", res.data);
                        var data = res.data;
                        if (data.aboutusImg != null && data.aboutusImg != '') {
                            $('#uploadAboutusImgView').removeClass('layui-hide').find('img').attr('src', data.aboutusImg);
                            $("[name=aboutusImg]").val(data.aboutusImg);
                        }
                        if (data.background1 != null && data.background1 != '') {
                            $('#uploadBackground1View').removeClass('layui-hide').find('img').attr('src', data.background1);
                            $("[name=background1]").val(data.background1);
                        }
                        if (data.background2 != null && data.background2 != '') {
                            $('#uploadBackground2View').removeClass('layui-hide').find('img').attr('src', data.background2);
                            $("[name=background2]").val(data.background2);
                        }
                    }
                }
            });
        }
        /* 监听表单提交 */
        form.on('submit(formAdvSubmit)', function (data) {
            const aboutusText = insEdt.getData();
            var field = Object.assign(data.field, { aboutusText: aboutusText });
            layer.confirm('确认要保存吗?', { btn: ['确定', '取消'] }
                , function (index) {
                    layer.load(2);
                    $.ajax({
                        url: '/api/webhome',
                        type: 'post',
                        data: JSON.stringify(field),
                        contentType: "application/json",
                        dataType: "json",
                        complete: function (obj) {
                            layer.closeAll('loading');
                        },
                        success: function (result) {
                            if (result.success) {
                                layer.msg(result.message, { icon: 1, time: 1200 }, function () {
                                    window.location.reload();
                                });
                            } else {
                                layer.msg(result.message, { icon: 2 });
                            }
                        }
                    });
                });
        });

        //上传关于我们图片
        upload.render({
            elem: '#uploadAboutusImg',
            url: '/api/upload/manageUpload', //必填项
            method: 'POST',  //可选项。HTTP类型，默认post
            accept: 'image',
            multiple: true,
            size:@(AppSetting.MaxFile * 1024),
            done: function (res, index, upload) { //每个文件提交一次触发一次。详见“请求成功的回调”
                if (res.success) {
                    layer.msg(res.message, { icon: 1 });
                    $('#uploadAboutusImgView').removeClass('layui-hide').find('img').attr('src', res.data.src);
                    $("[name=aboutusImg]").val(res.data.src);
                } else {
                    layer.msg(res.message, { icon: 2 });
                }
            }
        });

        //上传 首页背景图1
        upload.render({
            elem: '#uploadBackground1',
            url: '/api/upload/manageUpload', //必填项
            method: 'POST',  //可选项。HTTP类型，默认post
            accept: 'image',
            size:@(AppSetting.MaxFile * 1024),
            multiple: true,
            done: function (res, index, upload) { //每个文件提交一次触发一次。详见“请求成功的回调”
                if (res.success) {
                    layer.msg(res.message, { icon: 1 });
                    $('#uploadBackground1View').removeClass('layui-hide').find('img').attr('src', res.data.src);
                    $("[name=background1]").val(res.data.src);
                } else {
                    layer.msg(res.message, { icon: 2 });
                }
            }
        });

        //上传 首页背景图2
        upload.render({
            elem: '#uploadBackground2',
            url: '/api/upload/manageUpload', //必填项
            method: 'POST',  //可选项。HTTP类型，默认post
            accept: 'image',
            size:@(AppSetting.MaxFile * 1024),
            multiple: true,
            done: function (res, index, upload) { //每个文件提交一次触发一次。详见“请求成功的回调”
                if (res.success) {
                    layer.msg(res.message, { icon: 1 });
                    $('#uploadBackground2View').removeClass('layui-hide').find('img').attr('src', res.data.src);
                    $("[name=background2]").val(res.data.src);
                } else {
                    layer.msg(res.message, { icon: 2 });
                }
            }
        });
    });
</script>